<template>

  <div class="video-box">
    <el-card class="video-box-top">
      <el-alert title="需求说明" type="success" :closable="false" description="有时候想用手机看电脑上的视频的时候，很多人都推荐直接使用win的共享功能，但非常可惜的是，我的电脑共享功能就是有
      问题，导致无法正常查看。最麻烦是的，每次开启共享后还要记得关闭，否则很有可能被同一网络的小伙伴看到你的私密文件，这个时候我就
      想能否有办法可以解决这个问题，故而有了这个功能，它主要实现2个功能，一个是对指定的目录下的文件可以实现播放（注意，是你的程序部
      署的机器上的硬盘），第二个则是对一些在线电视视频拉流播放，也算是一种技术尝试。">
      </el-alert>
      <p></p>
      <el-alert title="警告" type="warning" :closable="false" description="使用本功能需要先前往 系统管理->默认配置 中进行设置，设置时注意，你的读取目录不应该设置太宽泛，比如直接将D盘共
      享，这极有可能导致敏感数据的泄漏，本功能只适合单机时候使用，因为该功能实际等于将服务器的一些目录公开，会导致未知的安全威胁，扫
      码生成的地址不一定正确，如果不能访问，需要进行IP地址和端口的检查">
      </el-alert>
    </el-card>

    <el-card class="video-box-con">
      <el-row :gutter="20" >
          <!--可播放视频列表-->
          <el-col :span="12" >
            <el-table max-height="560"
                :data="videoResourceList"
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="视频名称">
                </el-table-column>

                <el-table-column
                  prop="length"
                  label="资源大小">
                </el-table-column>

                <el-table-column
                  fixed="right"
                  label="操作"
                  min-width="100"
                  width="100">
                  <template slot-scope="scope">
                    <el-button @click="playVideo(scope.row)" type="text" size="small">播放</el-button>
                    <el-button @click="delPlayVideoTips(scope.row)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>

              </el-table>
          </el-col>

          <el-col :span="12" >
            <!--引入西瓜播放器-->
            <XiGuaPlayer ref="XiGuaPlayerRef" ></XiGuaPlayer>
            <el-row>
              <el-col :span="12">
                <p>开发</p>
                <img :src="base64PageImageDev" v-if="base64PageImageDev" />
              </el-col>
              <el-col :span="12">
                <p>生产</p>
                <img :src="base64PageImagePred" v-if="base64PageImagePred" />
              </el-col>
            </el-row>

          </el-col>

        </el-row>
    </el-card>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import XiGuaPlayer from '@/components/common/XiGuaPlayer.vue'

  export default {
    name: "VideoPlayback",
    components: {
      XiGuaPlayer
    },
    data(){
      return {
        // 可查看视频资源列表
        videoResourceList: [],
        // 播放访问地址
        server: null,
        // base64的二维码图片- 开发
        base64PageImageDev: null,
        // base64的二维码图片- 生产
        base64PageImagePred: null,
        // 服务器的IP地址 + 端口 + 路径后缀
        ip: '127.0.0.1:8084/ps',
      }
    },
    methods: {
      /**
       * 播放视频
       * @param row 当前数据
       */
      playVideo(row){
        if (this.server){
          // 一定要进行编码处理，否则可能因为地址的问题异常
          let url = this.server + encodeURIComponent(row.path)
          this.$refs.XiGuaPlayerRef.playXiGua(url, 'mp4')
        }
      },
      /**
       * 删除视频-提示
       * @param row 视频信息
       */
      delPlayVideoTips(row){
        this.$confirm('是否该删除该视频, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delPlayVideo(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 删除视频
       * @param row 视频信息
       */
      delPlayVideo(row){
        http.post("/video/delPlayVideo", {
          path: row.path,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getResourcesList()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 生成二维码
       * @param url 页面二维码
       */
      getPageUrl(url){
        http.post("/video/getPageUrl", {
          dev: 'dev',
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.base64PageImageDev = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })

        // 生产的
        http.post("/video/getPageUrl", {
          dev: 'prod',
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.base64PageImagePred = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取服务器播放地址
       */
      getServerAddress(){
        http.get("/video/getServerAddress", {
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.server = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 读取可查看的视频的资源
       */
      getResourcesList(){
        http.post("/video/getResourcesList", {
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.videoResourceList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取服务器IP地址
       */
      getIp(){
        http.get("/video/getIp", {
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            this.$message.error("无法访问，请检查前端配置是否配置正确的IP地址");
            return
          }
          this.ip = res.data

          this.getServerAddress()
          this.getResourcesList()
          this.getPageUrl()


        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getIp()
    },
  }
</script>

<style scoped>
.video-box{
  min-width: 900px;
  overflow-x: auto;
}
.video-box-top{
  min-width: 130px;
  margin-bottom: 10px;
}
.video-box-con{
  position: relative;
}
</style>
